<template>
  <div class="picture-gallery">
    <!-- 精简筛选区域，只保留颜色和关键词搜索 -->
    <div class="filter-section">
      <!-- 颜色选择 -->
      <div class="filter-row">
        <span class="filter-label">颜色：</span>
        <div class="filter-content">
          <div class="color-selector">
            <input type="color" v-model="filterParams.color" class="color-input" />
            <div class="color-display">
              <div
                class="color-preview"
                :style="{ backgroundColor: filterParams.color || '#ffffff' }"
              />
              <span>{{ filterParams.color || '请选择颜色' }}</span>
            </div>
            <a-button type="primary" @click="searchByColor" :disabled="!filterParams.color">
              <template #icon><SearchOutlined /></template>搜索
            </a-button>
            <span class="color-search-tip">（仅可搜索您空间内的图片）</span>
          </div>
        </div>
      </div>
      <!-- 关键词搜索 -->
      <div class="operation-bar">
        <div class="search-area">
          <a-input-search
            v-model:value="filterParams.searchText"
            placeholder="输入关键词搜索图片..."
            style="width: 300px"
            @search="applyFilters"
          />
        </div>
        <div class="action-area">
          <a-space>
            <a-button type="primary" @click="applyFilters">
              <template #icon><SearchOutlined /></template>应用筛选
            </a-button>
            <a-button @click="resetFilters">
              <template #icon><ReloadOutlined /></template>重置
            </a-button>
          </a-space>
        </div>
      </div>
    </div>
    <!-- 图片列表区域 -->
    <div class="content-section">
      <template v-if="loading">
        <a-spin size="large" />
      </template>
      <template v-else-if="dataList.length === 0">
        <a-empty :description="emptyText || '暂无图片'" />
      </template>
      <template v-else>
        <!-- 网格视图 -->
        <div class="grid-view">
          <div v-for="image in dataList" :key="image.id" class="grid-item">
            <div class="image-card">
              <div class="image-wrapper" @click="handlePreview(image)">
                <img :src="image.thumbnailUrl || image.url" :alt="image.name" class="image" />
              </div>
              <div class="image-info">
                <div class="image-name">{{ image.name }}</div>
                <div class="image-meta">
                  <span class="category">{{ image.category }}</span>
                  <span class="size">{{ (Number(image.picSize) / 1024).toFixed(2) }} KB</span>
                </div>
              </div>
              <div class="card-actions">
                <a-space>
                  <a-button type="link" @click.stop="handleLike(image)">
                    <template #icon>
                      <HeartFilled v-if="image.liked" style="color: #ff4d4f" />
                      <HeartOutlined v-else />
                    </template>
                  </a-button>
                  <a-button type="link" @click.stop="handleFavorite(image)">
                    <template #icon>
                      <StarFilled v-if="image.favorited" style="color: #faad14" />
                      <StarOutlined v-else />
                    </template>
                  </a-button>
                </a-space>
              </div>
            </div>
          </div>
        </div>
      </template>
      <!-- 分页 -->
      <div class="pagination-container">
        <a-pagination
          v-model:current="currentPage"
          :total="total"
          :pageSize="pageSize"
          showSizeChanger
          showQuickJumper
          @change="handlePageChange"
        />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ref, onMounted } from 'vue'
  import {
    SearchOutlined,
    ReloadOutlined,
    HeartOutlined,
    HeartFilled,
    StarOutlined,
    StarFilled,
  } from '@ant-design/icons-vue'
  import { message } from 'ant-design-vue'

  const props = defineProps({
    fetchList: Function,
    emptyText: String,
    batchCancelText: String,
    showBatchCancel: Boolean,
  })

  const filterParams = ref({
    searchText: '',
    color: '',
  })
  const dataList = ref<any[]>([])
  const total = ref(0)
  const loading = ref(false)
  const currentPage = ref(1)
  const pageSize = ref(20)

  const fetchData = async () => {
    loading.value = true
    try {
      const params = {
        page: currentPage.value,
        pageSize: pageSize.value,
        searchText: filterParams.value.searchText || undefined,
        color: filterParams.value.color || undefined,
      }
      const res = await props.fetchList?.(params)
      if (res?.data?.code === 200 && res.data.data) {
        dataList.value = res.data.data.records || res.data.data.list || []
        total.value = Number(res.data.data.total) || 0
      } else {
        message.error(res?.data?.message || '获取数据失败')
      }
    } catch (e) {
      message.error('获取数据失败')
    } finally {
      loading.value = false
    }
  }

  onMounted(() => {
    fetchData()
  })

  const searchByColor = () => {
    fetchData()
  }
  const applyFilters = () => {
    currentPage.value = 1
    fetchData()
  }
  const resetFilters = () => {
    filterParams.value.searchText = ''
    filterParams.value.color = ''
    currentPage.value = 1
    fetchData()
  }
  const handlePageChange = (page: number, size?: number) => {
    currentPage.value = page
    if (size) pageSize.value = size
    fetchData()
  }
  const handlePreview = () => {
    message.info('预览功能请在父组件实现')
  }
  const handleLike = () => {
    message.info('点赞功能请在父组件实现')
  }
  const handleFavorite = () => {
    message.info('收藏功能请在父组件实现')
  }
</script>

<style scoped>
  /* 保持页面简洁，适当留白 */
  .picture-gallery {
    padding: 24px 0;
  }
  .filter-section {
    background: #fff;
    border-radius: 8px;
    margin-bottom: 24px;
    padding: 24px 32px 12px 32px;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .filter-row {
    display: flex;
    align-items: center;
    gap: 16px;
  }
  .filter-label {
    font-size: 15px;
    font-weight: 500;
    color: #1a1a1a;
    min-width: 60px;
  }
  .color-selector {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .color-input {
    width: 44px;
    height: 32px;
    padding: 0;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }
  .color-display {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 120px;
  }
  .color-preview {
    width: 16px;
    height: 16px;
    border-radius: 2px;
    border: 1px solid #d9d9d9;
  }
  .color-search-tip {
    font-size: 12px;
    color: #8c8c8c;
    margin-left: 8px;
  }
  .operation-bar {
    display: flex;
    align-items: center;
    gap: 16px;
  }
  .search-area {
    flex: 1;
  }
  .action-area {
    display: flex;
    gap: 8px;
  }
  .content-section {
    background: #fff;
    border-radius: 8px;
    padding: 24px 32px;
    min-height: 300px;
  }
  .grid-view {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 16px;
    padding: 16px 0;
  }
  .grid-item {
    break-inside: avoid;
  }
  .image-card {
    background: #f8fafc;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
    transition: transform 0.2s;
    cursor: pointer;
  }
  .image-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  }
  .image-wrapper {
    position: relative;
    padding-top: 100%;
    overflow: hidden;
  }
  .image-wrapper img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .image-info {
    padding: 12px;
  }
  .image-name {
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .image-meta {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #666;
  }
  .category {
    color: #1890ff;
  }
  .card-actions {
    padding: 12px;
    display: flex;
    justify-content: center;
    border-top: 1px solid #f0f0f0;
  }
  .pagination-container {
    margin: 40px 0 24px;
    display: flex;
    justify-content: center;
  }
</style>
